<template>
    <div class="index">
        <div class="breadcrumb-def"><el-breadcrumb separator="/">
                <el-breadcrumb-item>首页</el-breadcrumb-item>
                <el-breadcrumb-item>打印设备</el-breadcrumb-item>
            </el-breadcrumb></div>
        <div class="search-def">
            <el-button size="small" @click="modalShow = true" type="primary">新增</el-button>
            <el-button size="small" @click="searchDataEv()" type="primary">查询</el-button>
        </div>
        <div class="vxe-table-def"><vxe-table show-overflow ref="xTable1" height="100%" align="center" :data="tableData"
                v-loading="loading" element-loading-text="拼命加载中">
                <vxe-column type="seq" width="60"></vxe-column>
                <!-- <vxe-column field="id" width="90" title="ID"></vxe-column> -->
                <!-- <vxe-column field="itemcode" title="资产编号"></vxe-column> -->
                <vxe-column field="name" title="打印机名称"></vxe-column>
                <vxe-column field="type_z" :formatter="formatterStatus" title="归属单据"></vxe-column>
                <vxe-column title="操作" width="220">
                    <template #default="{ row }">
                        <!-- <el-button size="small" @click="deleteEv(row.id)" type="primary">删除</el-button> -->
                        <el-popconfirm @confirm="deleteEv(row.id)" placement="top-end" title="确认永久删除此记录吗？">
                            <el-button size="small"  slot="reference">删除</el-button>
                        </el-popconfirm>
                    </template>
                </vxe-column>
            </vxe-table></div>

        <vxe-modal v-model="modalShow" title="新增打印机" show-zoom resize>
            <template #default>
                <div class="itm"><el-input v-model="printObj.name" placeholder="请输入打印机名称"></el-input></div>
                <div class="itm"><el-select style="width: 100%;" v-model="printObj.type_z" placeholder="请选择归属单据">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select></div>
                <div>
                    <el-button size="small" @click="addEv()" type="primary">确认</el-button>
                </div>
            </template>
        </vxe-modal>
    </div>
</template>
  
<script >

export default {
    name: 'printDevice',
    components: {},
    data() {
        return {
            loading: false,
            text: '',
            tableData: [],
            parameter: {
                name: '',
            },
            modalShow: false,
            printObj: {
                name: '',
                type_z: ''
            },
            options: [
                {
                    value: 1,
                    label: '压铸车间生产打印'
                },
                {
                    value: 2,
                    label: '半成品领用单'
                }, {
                    value: 3,
                    label: '厂库存条码补打印'
                }, {
                    value: 4,
                    label: '机加车间生产打印'
                }
            ]
        }
    },
    async mounted() {

    },
    methods: {
        formatterStatus({ cellValue }) {
            if (cellValue === 1) {
                return '压铸车间生产打印'
            } else if (cellValue === 2) {
                return '半成品领用单'
            } else if (cellValue === 3) {
                return '厂库存条码补打印'
            } else if (cellValue === 4) {
                return '机加车间生产打印'
            } else {
                return '归属异常' + cellValue
            }

        },
        async searchDataEv() {
            this.parameter.page = 1
            await this.searchEv()
        },
        async searchEv() {
            let parameterData = {}
            parameterData.name = this.parameter.name
            this.tableData = []
            this.loading = true
            try {
                const arr_data = await this.BaseprintDeviceGet(parameterData)
                console.log(arr_data)
                if (arr_data.status == 202) {
                    this.loading = false
                    this.$message.error({
                        showClose: true,
                        message: arr_data.data.msg,
                        duration: 0
                    })
                    return
                }
                if (arr_data.status !== 200) {
                    this.loading = false
                    this.$message.error({
                        showClose: true,
                        message: '查询失败',
                        duration: 0
                    })
                    return
                }
                this.tableData = arr_data.data.result

                this.text = '正在拼命加载中...'
                this.loading = false
                // this.$message.success({
                //     showClose: true,
                //     message: '查询成功'
                // })
            } catch (error) {
                this.loading = false
                if (error.response.status == 401) {
                    this.$message.error({
                        showClose: true,
                        message: 'token过期请重新登录',
                        duration: 0
                    })
                    return
                }
                this.$message.error({
                    showClose: true,
                    message: '查询接口请求失败',
                    duration: 0
                })
            }


        },

        // 删除
        async deleteEv(id) {
           
            this.loading = true
            try {
                const arr_data = await this.BaseprintDevicePut({id:id})
                console.log(arr_data)
                if (arr_data.status == 202) {
                    this.loading = false
                    this.$message.error({
                        showClose: true,
                        message: arr_data.data.msg,
                        duration: 0
                    })
                    return
                }
                if (arr_data.status !== 200) {
                    this.loading = false
                    this.$message.error({
                        showClose: true,
                        message: '删除失败',
                        duration: 0
                    })
                    return
                }
                this.searchEv()

                this.text = '正在拼命加载中...'
                this.loading = false
                this.$message.success({
                    showClose: true,
                    message: '删除成功'
                })
            } catch (error) {
                this.loading = false
                if (error.response.status == 401) {
                    this.$message.error({
                        showClose: true,
                        message: 'token过期请重新登录',
                        duration: 0
                    })
                    return
                }
                this.$message.error({
                    showClose: true,
                    message: '删除接口请求失败',
                    duration: 0
                })
            }
        },
        // 新增
        async addEv() {
            
            if (this.printObj.name == '') {
                this.$message.error({
                    showClose: true,
                    message: '打印机名称不能为空',
                    duration: 0
                })
                return
            }

            if (this.printObj.type_z == '') {
                this.$message.error({
                    showClose: true,
                    message: '归属单据不能为空',
                    duration: 0
                })
                return
            }
            this.loading = true
            try {
                const arr_data = await this.BaseprintDevicePost(this.printObj)
                console.log(arr_data)
                if (arr_data.status == 202) {
                    this.loading = false
                    this.$message.error({
                        showClose: true,
                        message: arr_data.data.msg,
                        duration: 0
                    })
                    return
                }
                if (arr_data.status !== 200) {
                    this.loading = false
                    this.$message.error({
                        showClose: true,
                        message: '新增失败',
                        duration: 0
                    })
                    return
                }
                this.searchEv()

                this.text = '正在拼命加载中...'
                this.loading = false
                this.modalShow = false
                this.$message.success({
                    showClose: true,
                    message: '新增成功'
                })
            } catch (error) {
                this.loading = false
                if (error.response.status == 401) {
                    this.$message.error({
                        showClose: true,
                        message: 'token过期请重新登录',
                        duration: 0
                    })
                    return
                }
                this.$message.error({
                    showClose: true,
                    message: '新增接口请求失败',
                    duration: 0
                })
            }
        }
    }
}
</script>
  
<style lang='less' scoped>
.index {
    height: 100%;
    width: 100%;
    padding: 0.5rem;
    box-sizing: border-box;
    // background-color: red;
}

.breadcrumb-def {
    height: 40px;
    line-height: 40px;
    display: flex;
    align-items: center;
    // background-color: white;
}

.search-def {
    height: 40px;
    line-height: 40px;
    display: flex;
    align-items: center;
}

.vxe-table-def {
    height: calc(100% - 120px);
}

.itm {
    padding-bottom: 10px;
    box-sizing: border-box;
}
</style>